<template>
	<div id="content">
		<Header />
		<div class="bread">
			<div class="cont w1200">
				<img src="../../../assets/img/location.png" alt=""><a><router-link
						to="/portal/index">首页</router-link></a> > <a><router-link
						to="/portal/net">网谷里</router-link></a>><a>代表履职</a>
				<a href="" class="back"><img src="../../../assets/img/back.png" alt=""><router-link
						to="/portal/net">返回上一级</router-link></a>
			</div>
		</div>
		<div class="inner">
			<div class="net w1200">
				<h3>代表履职</h3>
				<div class="form">
					<div class="form-left">
						<div class="btnL active">
							<img src="../../../assets/img/left-bar1-hover.png" alt="">
							<img src="../../../assets/img/left-bar1.png" alt=""><router-link
								to="/portal/net/repreWorkAdd">新建纪实</router-link>
						</div>
						<div class="btnL">
							<img src="../../../assets/img/left-bar2-hover.png" alt="">
							<img src="../../../assets/img/left-bar2.png" alt=""><router-link
								to="/portal/net/repreWork">历史纪实</router-link>
						</div>
					</div>
					<div class="form-right">
						<div class="title">
							<div class="line"></div>新建纪实
						</div>
						<div class="form-detail">
							<div class="input3">
								<span>履职类型</span>
								<select>
									<option value="1">建议</option>
									<option value="2">调研</option>
									<option value="3">公益</option>
									<option value="4">选举</option>
								</select>
							</div>
							<div class="input3">
								<span>履职标题</span>
								<input type="text" placeholder="请输入标题" v-model="title">
							</div>
							<div class="input3">
								<span>履职日期</span>
								<el-date-picker clearable v-model="startDate" type="date" value-format="yyyy-MM-dd"
									placeholder="请输入履职日期">
								</el-date-picker>
							</div>
							<div class="input3">
								<span>履职地点</span>
								<input type="text" placeholder="请输入地点" v-model="location">
							</div>
							<div class="warning-gray"><img src="../../../assets/img/warning.png"
									alt="">服务时长由社区党组织根据服务内容设置时长，一般为1-4小时，也可自定义设置时长。</div>
							<div class="input4">
								<div class="name">
									服务内容
									<div class="num">{{ description.length }}/2000</div>
								</div>
								<div class="text-cont">
									<editor v-model="description" placeholder="您可以对服务内容进行简要描述" :min-height="300" />
									<!--									<div class="img-list" prop="imageUpload">-->
									<!--										<image-upload v-model="imageUpload" :limit="1" />-->
									<!--									</div>-->
								</div>
							</div>
							<div class="confirm-btn" @click="confirm()">
								提交
							</div>
						</div>
					</div>
				</div>

			</div>
		</div>
		<Contact />
	</div>

</template>

<script>
import Header from '@/components/Header';
import Contact from '@/components/Contact';
import { addRepWork } from "@/api/website";
export default {
	data() {
		return {
			userInfo: "",
			title: "",
			startDate: "",
			location: "",
			description: "",
			imageUpload: null,
		}
	},
	components: {
		Header,
		Contact
	},
	created() {
		this.userInfo = JSON.parse(sessionStorage.getItem("useInfo"))
	},
	mounted() {

	},
	methods: {
		confirm() {
			if (!this.title) {
				this.$modal.msgError("请输入标题");
				return
			}
			if (!this.startDate) {
				this.$modal.msgError("请输入履职日期");
				return
			}
			if (!this.location) {
				this.$modal.msgError("请输入地点");
				return
			}
			if (!this.description) {
				this.$modal.msgError("请输入服务内容");
				return
			}
			addRepWork({
				"representativeId": this.userInfo.id,
				"representativeName": this.username,
				"title": this.title,
				"description": this.description,
				"startDate": this.startDate,
				"location": this.location,
				"imagePath": this.imageUpload,
				"reviewStatus": "待审核"
			}).then(response => {
				this.$router.push('/portal/net/repreWork');
			});
		}
	}

};
</script>

<style scoped lang="scss">
.el-upload--picture-card {
	width: 100% !important;
	height: 100% !important;
}
</style>
